<!--
 * 参数管理--新增编辑参数
 * @author: hexiaozhen
 * @since: 2023-09-27
 * addEditConfig.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增参数' : '编辑参数'"
    title-align="start"
    width="600px"
    draggable
    :mask-closable="false"
    @cancel="handleCancel"
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :rowspan="24"
      :formItems="formItems"
      :formData="formData"
      class="tableForm"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, onMounted, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import system from '@/api/modules/system'
import { Message } from '@arco-design/web-vue'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const formAndTableRef = ref() // 表单
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addConfig' : 'editConfig'
      formData.menuIds = formData.menuIds || []
      system[api]({ ...formData }).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 获取字典数据
const configTypeOptions = ref([])
// 表单配置
const formItems = reactive([
  { name: 'configName', label: '参数名称', type: 'a-input' },
  { name: 'configKey', label: '参数键名', type: 'a-input' },
  { name: 'configValue', label: '参数键值', type: 'a-input' },
  { name: 'configType', label: '系统内置', type: 'a-radio', options: configTypeOptions },
  { name: 'remark', label: '备注', type: 'a-textarea' },
])
let formData = reactive({ configName: '', configKey: '', configValue: '', configType: 'Y', remark: '' })
if (rowData.value.type === 'edit') {
  formData = reactive({ ...rowData.value })
  delete formData.type
}
const rules = reactive({
  configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
  configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
  configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
})
//  数据字典
const getOption = () => {
  const param = { dictTypes: 'sys_yes_no' }
  system.getDicts(param).then((res) => {
    configTypeOptions.value = res.data.sys_yes_no.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
}

onMounted(() => {
  getOption()
})
</script>
